<template>
  <el-form
    ref="qmGenForm"
    :model="model"
    :rules="rules"
    :disabled="disabled"
    label-width="80px"
  >
    <el-row :gutter="20">
      <el-col :span="24">
        <el-form-item label="新闻标题" prop="title">
          <el-input v-model="model.title" placeholder="请输入新闻标题" />
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="发布时间" prop="pubdate">
          <el-date-picker
            clearable
            size="small"
            v-model="model.pubdate"
            type="datetime"
            value-format="yyyy-MM-dd HH:mm:ss"
            placeholder="选择发布时间"
          ></el-date-picker>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="作者" prop="author">
          <el-input v-model="model.author" placeholder="请输入作者" />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="来源" prop="origin">
          <el-input v-model="model.origin" placeholder="请输入来源" />
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="封面图片" prop="coverImg">
          <el-upload
            action="#"
            :limit="1"
            :auto-upload="false"
            :on-change="changeFile"
            :on-exceed="outOfLimit"
          >
            <el-button size="small" type="primary">点击上传</el-button>
          </el-upload>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <el-form-item label="新闻内容" prop="content">
          <editor v-model="model.content" :min-height="298" />
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>

<script>
import Editor from "@/components/Editor";
export default {
  props: {
    models: Object,
    model: Object,
    disabled: Boolean,
  },
  components: {
    Editor,
  },
  data() {
    return {
      // 表单校验
      rules: {
        title: [
          {
            required: true,
            message: "新闻标题不能为空",
            trigger: "blur",
          },
        ],
        pubdate: [
          {
            required: true,
            message: "发布时间不能为空",
            trigger: "blur",
          },
        ],
        content: [
          {
            required: true,
            message: "新闻内容不能为空",
            trigger: "blur",
          },
        ],
        createUserId: [
          {
            required: true,
            message: "创建人编号不能为空",
            trigger: "blur",
          },
        ],
        createUserName: [
          {
            required: true,
            message: "创建人名称不能为空",
            trigger: "blur",
          },
        ],
        createTime: [
          {
            required: true,
            message: "创建时间不能为空",
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {

    //将file类型转换为Base64
    changeFile(file) {
    var This = this
    var reader = new FileReader();
    reader.readAsDataURL(file.raw);
    reader.onload = function(e){ 
        This.model.coverImg = this.result
        console.log(this.result);
    }
    },
    outOfLimit(){
           this.$message({
          showClose: true,
          message: '只能上传一张图片!',
          type: 'error'
        });
    }
  },
};
</script>

<style scoped lang="scss">
</style>